<template>
  <div class="sort-icon-nav" @click="onClick()">
    <a class="el-icon-caret-top" :class="topActive ? 'light-color' : 'default-color'" />
    <a class="el-icon-caret-bottom" :class="bottomActive ? 'light-color' : 'default-color'" />
  </div>
</template>

<script>
export default {
  name: 'SortIcon',
  props: {
    queryParams: {
      type: Object,
      default: () => {},
      required: true
    },
    thisKey: {
      type: String,
      required: true
    },
    clearParam: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      topActive: false,
      bottomActive: false,
      times: 0 // 0 不排序，1升序，2降序
    }
  },
  methods: {
    onClick() {
      if (this.times === 2) this.times = 0
      else this.times++

      if (this.times === 1) {
        /** 升序 */
        this.topActive = !this.topActive
        this.bottomActive = false

        if (this.topActive) this.setSortRule('asc')
        else this.clearSortRule()
      } else if (this.times === 2) {
        /** 降序 */
        this.bottomActive = !this.bottomActive
        this.topActive = false

        if (this.bottomActive) this.setSortRule('desc')
        else this.clearSortRule()
      } else if (this.times === 0) {
        /** 不排序 */
        this.topActive = false
        this.bottomActive = false
        this.clearSortRule()
      }
    },
    setSortRule(sortType) {
      const joinParams = {
        ...this.$props.queryParams,
        sort_type: sortType, // 排序类型 desc 降序 asc 升序
        sort_field: this.$props.thisKey
      }
      this.$emit('update:queryParams', joinParams)
      this.$emit('refresh')
    },
    clearSortRule() {
      const joinParams = {
        ...this.$props.queryParams,
        sort_type: '', // 排序类型 desc 降序 asc 升序
        sort_field: ''
      }
      this.$emit('update:queryParams', joinParams)
      this.$emit('refresh')
    }
  }
}
</script>

<style lang="scss" scoped>
.sort-icon-nav {
  display: flex;
  flex-direction: column;
  width: 14px;
  margin-left: 6px;
  position: relative;
  .el-icon-caret-top {
    position: absolute;
    top: 1px;
    font-size: 14px;
  }
  .el-icon-caret-bottom {
    position: absolute;
    bottom: 1px;
    font-size: 14px;
  }
}
.default-color {
  color: #c0c4cc;
}
.light-color {
  color: #1890ff;
}

</style>
